<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    :title="
      !modelValue.form.id
        ? `新增${modelValue.title}`
        : `修改${modelValue.title}`
    "
    width="760px"
  >
    <el-form
      :model="modelValue.form"
      :rules="modelValue.rules"
      ref="addEditRef"
      :label-width="90"
    >
      <el-form-item label="规则编码" prop="number">
        <el-input
          v-model="modelValue.form.number"
          maxlength="64"
          show-word-limit
          placeholder="请输入规则编码"
        />
      </el-form-item>

      <el-form-item label="规则名称" prop="name">
        <el-input
          v-model="modelValue.form.name"
          maxlength="64"
          show-word-limit
          placeholder="请输入排料规则名称"
        />
        <div class="example-text">
          例如：每隔2小时提醒机台擦拭物料口，并连续排出物料5秒
        </div>
      </el-form-item>
      <el-form-item label="规则设置">
        <div>
          <el-radio-group
            v-model="modelValue.form.settingType"
            class="radio-group"
          >
            <el-radio-button label="1">超时未出料</el-radio-button>
            <el-radio-button label="2">定时提醒排料</el-radio-button>
          </el-radio-group>
          <div v-if="modelValue.form.settingType == 1">
            <div
              style="
                line-height: 16px;
                font-size: 12px;
                padding: 12px 0;
                color: #ef9f24;
              "
            >
              为保障食品安全，若物料长时间未出料，需及时排出出料口附近的滞留物料；对于特殊物料，还需同步进行管路冲洗处理；可根据实际使用场景灵活选用，按需匹配规则执行。
            </div>
            <el-radio-group v-model="modelValue.form.selectedOption">
              <div
                v-for="(item, index) in modelValue.form.options"
                class="option-item"
                :key="index"
              >
                <el-radio :label="index">
                  <div :style="{ 'margin-top': index == 2 ? '32px' : '0' }">
                    <span style="margin-right: 12px">物料在</span
                    ><el-input-number
                      style="width: 120px"
                      v-model="item.hours"
                      :min="1"
                      class="number-input"
                    />
                    <span class="option-unit">小时内未出料,</span>
                    <template v-if="index === 0">
                      <span style="margin-right: 12px">排出</span>
                      <el-input-number
                        style="width: 120px"
                        v-model="item.value"
                        :min="1"
                        class="number-input"
                      />
                      <span style="margin-left: 12px">{{ item.unit }}</span>
                    </template>

                    <template v-if="index === 1">
                      <span style="margin-right: 12px">连续排出</span>
                      <el-input-number
                        style="width: 120px"
                        v-model="item.value"
                        :min="1"
                        class="number-input"
                      />
                      <span style="margin-left: 12px">{{ item.unit }}</span>
                    </template>
                    <template v-if="index === 2">
                      <span style="margin-right: 12px">需冲洗管路，冲水量</span>
                      <el-input-number
                        style="width: 120px"
                        v-model="item.value"
                        :min="1"
                        class="number-input"
                      />
                      <span>
                        <span style="margin-left: 12px; margin-right: 12px"
                          >{{ item.unit }}，<br />冲洗完毕后填充管路</span
                        >
                        <el-input-number
                          style="width: 120px"
                          v-model="item.extralValue"
                          :min="1"
                          class="number-input"
                        />
                        <span style="margin-left: 12px"
                          >{{ item.extralUnit }} 物料</span
                        >
                      </span>
                    </template>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
          <div v-else>
            <div
              style="
                line-height: 16px;
                font-size: 12px;
                padding: 12px 0;
                color: #ef9f24;
              "
            >
              规则说明：定期提醒清洁并排出残留物料，预防堵塞与污染，保障出料顺畅
            </div>
            <el-radio-group v-model="modelValue.form.dischargeSelectedOption">
              <div
                v-for="(item, index) in modelValue.form.dischargeOption"
                class="option-item"
                :key="index"
              >
                <el-radio :label="index">
                  <div :style="{ 'margin-top': index == 2 ? '32px' : '0' }">
                    <span style="margin-right: 12px">每隔</span
                    ><el-input-number
                      style="width: 120px"
                      v-model="item.hours"
                      :min="1"
                      class="number-input"
                    />
                    <span class="option-unit">
                      小时提醒机台擦拭物料口，并连续</span
                    >
                    <template v-if="index === 0">
                      <el-input-number
                        style="width: 120px"
                        v-model="item.value"
                        :min="1"
                        class="number-input"
                      />
                      <span style="margin-left: 12px"
                        >{{ item.unit }} 排出物料</span
                      >
                    </template>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </el-form-item>
      <!-- formData.settingType == 1 -->
      <el-form-item
        label="备注"
        :style="{
          'margin-top': modelValue.form.settingType == 1 ? '36px' : '0px',
        }"
      >
        <el-input
          v-model="modelValue.form.remark"
          type="textarea"
          maxlength="255"
          show-word-limit
          :rows="3"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <template #footer v-if="!modelValue.form.disabled">
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ensure"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  addFdsMaterialDischargeRuleset,
  updateFdsMaterialDischargeRuleset,
  getFdsMaterialDischargeRulesetPagination,
  getFdsMaterialDischargeRulesetAllList,
} from '@/api/fds-material-discharge-ruleset.api'

const props = defineProps(['modelValue'])
const addEditRef = ref(null)

const cancel = () => {
  props.modelValue.visible = false
}

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    number: form.number,
    name: form.name,
    enabled: '1',
    // settingType: form.settingType,
    // selectedOption: form.selectedOption,
  }
  // 超时未出料
  if (form.settingType == '1') {
    //radio 选项
    formData.selectedOption = form.selectedOption
    let options = form.options || []
    let optionItem = options[form.selectedOption] || {}
    formData.hours = optionItem.hours
    formData.value = optionItem.value
    formData.unit = optionItem.unit
    formData.extralValue = optionItem.extralValue
    formData.extralUnit = optionItem.extralUnit
    // 定时提醒排料
  } else {
    formData.selectedOption = form.dischargeSelectedOption
    let options = form.dischargeOption || []
    let optionItem = options[form.dischargeSelectedOption] || {}
    formData.hours = optionItem.hours
    formData.value = optionItem.value
    formData.unit = optionItem.unit
    // formData.extralValue = optionItem.extralValue
    // formData.extralUnit = optionItem.extralUnit
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateFdsMaterialDischargeRuleset({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addFdsMaterialDischargeRuleset(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}
</script>

<style scoped>
.input-suffix {
  font-size: 12px;
  color: #666;
  text-align: right;
  padding-right: 8px;
}

.example-text {
  color: #ef9f24;
  font-size: 12px;
  margin-top: 8px;
  line-height: 10px !important;
}

.radio-group {
  display: flex;
}

.tip-container {
  margin-bottom: 0;
}

.tip-alert {
  margin-top: 10px;
}

.option-item {
  margin-bottom: 15px;
  /* flex-wrap: wrap; */
  /* display: flex; */
}

.option-unit {
  margin: 0 8px;
}
</style>
